<template>
  <div>
    <h1>{{ count }}</h1>
    <!-- <keep-alive> -->
      <div v-show="isShow">
        <Test
          v-for="(item, index) of data"
          :key="index"
          :item="item"
          @remove="remove"
        />
      </div>
    <!-- </keep-alive> -->
    <button @click="onShowHandle">{{isShow? '隐藏': '显示'}}</button>
  </div>
</template>

<script>
import {
  ref,
  getCurrentInstance,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onErrorCaptured,
  onRenderTriggered,
  onRenderTracked
} from 'vue';
import Test from '@/components/Test-lifecycle';

// onMounted(() => { // onXxx Vue3中的生命周期都需要在setup函数里执行
//   console.log(123);
// })
export default {
  name: 'App',
  components: {
    Test
  },
  // beforeCreate() {}, // Vue3 中这两个生命周期已被删除
  // created() {},
  // 当实例被创建、属性都初始化完成后 在beforeCreate 之前调用 
  setup(props, ctx) { // 入口函数，
    const instance = getCurrentInstance(); // 获取当前实例
    console.log(instance);
    console.log('setup');

    const count = ref(0);
    setTimeout(() => {
      count.value = 1;
    }, 2000)

    const data = ref([
      {
        id: 1,
        title: '第一项'
      }, {
        id: 2,
        title: '第二项'
      }
    ])

    const remove = (id) => {
      data.value = data.value.filter(item => item.id !== id);
    }

    const isShow = ref(true);

    const onShowHandle = () => {
      isShow.value = !isShow.value;
    }

    // 当实例被销毁时，在生命周期hook里创建的watchers和computed属性也会同样被卸载掉
    onBeforeMount(() => { // 组件挂载前
      console.log('onBeforeMount');
    })
    onMounted(() => { // 组件挂载后(一般数据请求在这里写)
      console.log('onMounted');
    })

    onUpdated(() => { // 数据更新后 (虚拟DOM渲染完成)
      console.log('onUpdated');
    })
    onBeforeUpdate(() => { // 数据更新前 (虚拟DOM打补丁之前)
      console.log('onBeforeUpdate');
    })
    watchEffect(() => {
      const a = count.value;
      console.log('watchEffect', a);
    }, {
      // 默认pre,是执行在onBeforeUpdate之前 但无论何时都会在onUpdated之前执行
      flush: 'post', // post: 滞后
      onTrigger(e) {}, // 调试用
      onTrack(e) {} // 调试用
    })

    onErrorCaptured((e) => { // 捕获错误(异常) 主要用于子孙组件
      console.log(e);
    })

    onRenderTriggered((e) => { // render 重新触发时
      // debugger; // 一般开发环境下使用
    })

    onRenderTracked((e) => { // 追踪 render
      // debugger;
    })

    return {
      count,
      data,
      isShow,
      remove,
      onShowHandle
    }
  }
}
</script>

<style>

</style>
